<template>
  <div id="menu">
    <el-row class="tac">
      <el-col>
        <div class="InputSearch"> <el-input class="rounded-input" size="mini" prefix-icon="el-icon-search"
            placeholder="商品名称" clearable>
          </el-input></div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-menu-item v-for="menuSon in menuList" :key="menuSon.name" :index="menuSon.name"
            :disabled="menuSon.disabled">
            {{ menuSon.title }}
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      activeIndex: 'Business',
      menuList: [
        {
          name: '0',//对应index
          title: '未分类',
        },
        {
          name: '1',//对应index
          title: '会员卡',
        },
        {
          name: '2',//对应index
          title: '特产',
        },
        // 超市设置
        {
          name: '3',//对应index
          title: '饮料',
        },

        {
          name: '4',//对应index
          title: '零食',
          // path: '/Settings/AccountManage',
        },
        {
          name: '5',//对应index
          title: '小吃',
        },
        {
          name: '6',//对应index
          title: '电竞外设',
        },
        {
          name: '7',//对应index
          title: '其他',
        },
      ]
    }
  },
  methods: {
    clickMenu() {
      console.log("点击了");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  }
}
</script>

<style lang="scss" scoped>
#div-nav::-webkit-scrollbar {
  display: none;
}

* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}

::v-deep .is-active {
  margin-left: 0px !important;
  padding-left: 25px !important;
  border-left: 6px solid !important;
  border-left-color: #0486fe !important;
  background-color: #f6f8ff;
}

/deep/.rounded-input .el-input__inner {
  border-radius: 20px;
  /* 设置边框半径为 20px 或其他值 */
}

/deep/.rounded-input .el-input__inner:focus {
  border-color: #a6a6a6;
  /* 可选，定义获得焦点时的边框颜色 */
}

.tac {
  height: 100%;

  .InputSearch {
    margin: 15px 0px;

    .el-input {
      border-radius: 50%;
      width: 120px;
      height: 24px;
      margin-left: 10px;
    }
  }

  .el-menu {
    position: flex;
    height: 100%;
    width: 140px;
    overflow: auto;


    .el-menu-item {}
  }
}

#menu {
  width: 140px;
  height: 100%;
  overflow: auto;
  background-color: white;
}
</style>